<template>
  <view class="viewpoint" :style="{ paddingTop: safeAreaInsets!.top + 'px'}">
    <!-- 底部导航 -->
    <view class="navigate">
      <text class="right" @tap="back">取消</text>
      <text class="left_active" @tap="toNext" v-if="newsform.title || newsform.content"
        >下一步</text
      >
      <text class="left" v-else>下一步</text>
    </view>
    <view class="editor">
      <!-- 标题 -->
      <view class="title">
        <textarea
          placeholder="请输入标题 (2~30个字)"
          placeholder-class="input-placeholder"
          v-model="newsform.title"
        />
      </view>
      <!-- 编辑器 -->
      <editornews
        v-if="newsform.content.length != 0"
        @input="getText"
        :value="newsform.content"
        style="height: 100%; display: flex"
      ></editornews>
    </view>
  </view>
</template>

<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
import editornews from './componets/editornews.vue'
import { ref, defineProps } from 'vue'
import { useMemberStore } from '@/stores/index'
import { getNewsDetaiAPI } from '@/services/detail'
import { onLoad } from '@dcloudio/uni-app'
//接收页面传递参数
const query = defineProps<{ param1: number }>()
const newsform = ref({
  title: '', //新闻标题
  newsId: 0, //新闻id
  account: '', //作者名字
  releaseTime: '', //发布时间
  content: '', //内容
  newsImg: [''], //新闻封面
  categoryId: 0, //分类id
  status: 0, //0是发布待审核，-1是草稿,1是上架，2是下架
  auditResult: '',
})
//点击下一步
const memberStore = useMemberStore()
//获取新闻详情
const getNewsDetail = async () => {
  const res = await getNewsDetaiAPI(query.param1)
  newsform.value.title = res.data.title
  newsform.value.content = res.data.content
  newsform.value.newsImg = res.data.newsImgArr
  newsform.value.categoryId = res.data.categoryId
  newsform.value.newsId = query.param1
  newsform.value.auditResult = res.data.auditResult
}
//获取新闻内容
const getText = (val: string) => {
  newsform.value.content = val
}
//返回
const back = () => {
  uni.navigateBack()
}
//下一步
const toNext = () => {
  console.log(newsform.value)

  uni.navigateTo({
    url: `/pages/modifynewsnext/modifynewsnext?newsform=${encodeURIComponent(
      JSON.stringify(newsform.value),
    )}`,
  })
}
onLoad(() => {
  getNewsDetail()
})
</script>

<style lang="scss">
page {
  height: 100%;
}
.viewpoint {
  padding: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .navigate {
    font-size: 32rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      color: #a7a4a4;
    }
    .left_active {
      color: #f04142;
    }
  }
  .editor {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .title {
      height: 120rpx;
      border-bottom: 1rpx solid #ccc;
      margin-top: 30rpx;
      textarea {
        height: 100%;
        font-size: 45rpx;
        color: #000;
        font-weight: bold;
        width: 100%;
      }
      .input-placeholder {
        color: #a7a4a4;
        font-size: 45rpx;
      }
    }
  }
}
</style>